<template>
	<view>

		<u-navbar title="待到账明细" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#1D1D20" />

		<view class="flex margin">
			<view class="flex w-100">
				<view class="tab-item" :class="{'tab-item-active': tabIndex == 0}" @click="selectTab(0)">待到账</view>
				<view class="tab-item" :class="{'tab-item-active': tabIndex == 1}" @click="selectTab(1)">已发放</view>
			</view>
		</view>

		<view class="bg-white margin-lr padding margin-bottom radius-8 card-shadow"  v-for="(item, index) in walletList" :key="index">
			<view class="flex justify-between font-30">
				<view>业务编号：{{ item.bizCode }}</view>
				<view class="text-bold">{{item.addRed ? '+' : '-'}}{{item.money}}</view>
			</view>
			<view class="font-28 m-t-5">{{item.rema}}</view>
			<view class="flex justify-between font-28 text-gray m-t-5">
				<view>{{item.createTime}}</view>
			</view>
		</view>
		<empty :show="walletList.length == 0" />

		<u-loadmore :status="status" color="#cccccc" class="padding-bottom padding-top-xs"/>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { FreezeFlow } from '@/common/api/customer.js'
	export default {
		data() {
			return {
				current: 0,
				status: 'loading',
				pageNo: 0,
				walletList: [],
				incomeFlag: null,
				walletType: '',
				tabIndex: 0,
				releasedList: [],
				pointsExpiredData:[],//过期积分列表
				timeData: {},
				statesRecord: 0
			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onLoad(options) {
			this.tabIndex = options.tabIndex ||　0;
			this.walletType = options.walletType
			this.getwalletFlow()
		},
		onReachBottom() {
			this.getwalletFlow()
		},
		methods: {
			// tab切换
			selectTab(index) {
				this.tabIndex = index
				this.statesRecord = index
				this.resetData()
				this.getwalletFlow()
			},
			getwalletFlow() {
				this.pageNo++
				this.status = 'loading'
				let params = {
					pageNo: this.pageNo,
					pageSize: 10,
					states: this.statesRecord
				}
				if(this.incomeFlag != null) {
					params.incomeFlag = this.incomeFlag
				}
				FreezeFlow(params,this.walletType).then(res => {
					this.walletList = this.walletList.concat(res.data)
					if (res.data.length < 10) {
						this.status = 'nomore'
					}
				})
			},
			resetData() {
				this.pageNo = 0
				this.walletList = []
			},
			copyCode() {
				let that = this
				uni.setClipboardData({
					data: this.userInfo.invitationCode,
					success: function() {
						that.$msg('复制成功')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	background: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.head {
	.copy-btn {
		border: 2rpx solid #808080;
		color: #808080;
		font-size: 20rpx;
		padding: 2rpx 10rpx;
		margin-left: 20rpx;
		border-radius: 6rpx;
	}
}
.tab-item {
	flex: 1;
	height: 64rpx;
	// box-shadow: 0rpx 2rpx 10rpx 1rpx #fa31213d;
	color: #ECA52B;
	text-align: center;
	line-height: 64rpx;
	font-size: 30rpx;
	border: 1px solid #ECA52B;
	border-radius: 16rpx;
	margin-right: 20rpx;
}
.tab-item:last-child{
	margin-right: 0;
}
.tab-item-active {
	background: #ECA52B;
	color: #ffffff;
	border: none !important;
}
.card-shadow {
	box-shadow: 0px 2px 8px 1px rgba(47,78,123,0.04);
}
</style>
